<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>

    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        #app {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">角色管理</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">筛选区</span>
                        <div style="float: right">
                            <el-button type="primary" @click.native.prevent="getList">查询</el-button>
                            <el-button type="primary" @click.native.prevent="clearSearch">清空查询条件</el-button>
                        </div>
                    </div>
                    <el-form :inline="true" ref="search" :model="search" label-width="80px">
                        <el-form-item label="角色搜索">
                            <el-input v-model="search.keyword" placeholder="名称/手机号码"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">角色信息列表</span>
                        <el-button type="primary" style="float: right;" v-if="isPermission('role:add', user.permissions)"  @click.native.prevent="addUser" >添加</el-button>
                    </div>
                    <el-table
                            :data="roleList"
                            border
                            style="width: 100%">
                        <el-table-column
                                inline-template
                                label="序号"
                                width="80">
                            <div>{{ $index+pageSize*(currentPage-1)+1 }}</div>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="角色名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desc"
                                label="角色描述">
                        </el-table-column>
                        <el-table-column
                                prop="insertTime"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center">
                                        <el-dropdown-item v-if="isPermission('role:edit', user.permissions)" ><el-button size="mini" type="primary" @click.native.prevent="editUser(row)">编辑</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('role:delete', user.permissions)" ><el-button size="mini" type="primary" @click.native.prevent="confirmDelete(row.id)">删除</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>

            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>
    <el-dialog :title="dialogTitle" v-model="addRoleDialog">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">基本信息</span>
            </div>
            <el-form :model="form" ref='form' :rules="roleRules" label-width="80px">
                <el-form-item prop="name" label="角色名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="form.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card" style="margin-top: 10px">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">角色权限</span>
                <el-button type="primary" style="float: right;" @click="addRolePermission">添加</el-button>
            </div>
            <el-table
                    :data="form.functionList"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="权限名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="desc"
                        label="角色描述">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        inline-template>
                    <div style="margin-left: -10px">
                        <el-button size="small" type="primary" class="el-icon-delete" @click.native="deleteRolePower(row.id)"></el-button>
                    </div>
                </el-table-column>
            </el-table>
        </el-card>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click.native.prevent="saveAddUser">保 存</el-button>
        </div>
    </el-dialog>
    <el-dialog v-model="addRolePermissionDialog">
        <el-card class="box-card">
            <yiqi-transfer-list ref="roleTransfer" :lefttitle="leftTitle" :righttitle="rightTitle" :data="data" :roledata="roleData"></yiqi-transfer-list>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addRolePermissionDialog = false">取 消</el-button>
            <el-button type="primary" @click.native.prevent="saveAddRole">保 存</el-button>
        </div>
    </el-dialog>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>
<script src="/static/js/api.js"></script>
<!-- 引入vue组件 -->
<script src="/static/js/dist/vueComponents.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                form: {
                    name:''
                },
                leftMenuList: list.menu,
                search: {
                    keyword: ''
                },
                addRoleDialog: false,
                dialogTitle: "添加功能",
                roleList: [],
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                addRolePermissionDialog: false,
                leftTitle: '所有权限-源列表',
                rightTitle: '所有权限-目的列表',
                data: [],
                roleData: [],
                id: 1,
                roleRules:{
                    name: [
                        {required:true,message:'角色名不能为空',trigger:'change'}
                    ]
                },
              isValid:true,
            }
        },
        mounted: function () {
            this.getList();
            this.getFunctionList();
        },
        methods: {
            addRolePermission(){
                this.addRolePermissionDialog = true
            },
            cancel () {
                this.$refs.form.resetFields();
                this.addRoleDialog = false;
            },
            handleCurrentPageChange(val) {
                this.currentPage = val
                this.getList();
            },
            getList () {
                let that = this
                let obj = {
                    name: this.search.keyword,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
                $.ajax({
                    type: "POST",
                    url: "/role/list",
                    data: JSON.stringify(obj),
                    contentType:"application/json",
                    dataType: "json",
                    success: function(data){
                        that.roleList = data.data.list;
                        that.totalCount = data.data.total;
                        console.log(that.roleList);
                    }
                })
            },
            clearSearch () {
                this.search.keyword = "";
                this.getList();
            },
            confirmDelete(id){
                let that = this;
                this.$confirm('此操作将永久删除该项, 是否继续?', '提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(function () {
                    that.deleteRoleUser(id)
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            deleteRoleUser(id) {
                let that = this;
                let obj = {
                    id: id
                }
                this.http("/role/delete", obj, function (res) {
                    if (res.status === 200) {
                        //that.clearForm();
                        that.$alert('删除成功', '提示', {
                            confirmButtonText: '确定'
                        });
                        that.getList();
                    } else {
                        that.$alert('删除失败', '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    that.$alert('删除失败', '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            clearForm () {
                this.addRoleDialog = false
                this.form = {
                    name: '',
                    functionIds: [],
                    desc: ''
                }
                this.dialogTitle = "添加功能";
            },
            addUser(){
                this.form = {
                    name: '',
                    desc: '',
                    functionIds:[]
                }
                this.roleData = [];
                this.addRoleDialog = true;
                this.isValid = true;
            },
            editUser (row) {
                let that = this;
                this.http("/role/detail",{id:row.id},function(res){
                    if(res.status === 200){
                        let data = res.data.detail
                        that.dialogTitle = '编辑功能';
                        that.form = {
                            id: data.id,
                            name: data.name,
                            functionIds: data.functionIds,
                            functionList: res.data.functionList,
                            desc: data.desc
                        }
                        that.addRoleDialog = true;
                        that.roleData = res.data.detail.functionIds;
                    }else{
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                },function(res){
                    that.$alert("服务器错误","提示",{
                        confirmButtonText: '确定',
                    })
                })
            },
            saveAddUser (){
                let that = this
                let obj = {}
                let url = ""
                let contentSuccess = ''
                let contentError = ''
                if(this.form.id !== undefined){
                    if(this.form.name === ''){
                        this.$refs.form.validate(function(valid){
                        })
                    }else{
                        obj = {
                            id: this.form.id,
                            name: this.form.name,
                            functionIds: this.roleData,
                            desc: this.form.desc
                        }
                        contentSuccess = '编辑成功'
                        contentError = '编辑失败'
                        url = '/role/update'
                    }
                }else{
                    if(this.form.name === ''){
                        this.$refs.form.validate(function (valid) {
                            if(!valid){
                                that.$message.error('角色名必填');
                                that.isValid = false;
                            }
                        })
                    }else{
                        obj = {
                            name: this.form.name,
                            functionIds: this.roleData,
                            desc: this.form.desc
                        }
                        contentSuccess = '添加成功'
                        contentError = '添加失败'
                        url = '/role/insert'
                    }
                }
                this.http(url,obj,function (res) {
                    if (res.status === 200) {
                            that.$alert(contentSuccess, '提示', {
                                confirmButtonText: '确定'
                            });
                            that.addRoleDialog = false;
                            that.getList();
                            that.clearForm ();
                            that.$refs.form.resetFields();
                    } else {
                        that.$alert(contentError, '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                },function (res) {
                    if(res.status !== 200){
                        that.$alert(contentError, '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                })
            },
            getFunctionList () {
                let that = this;
                this.http("/function/list", {currentPage: 1, name: '', pageSize: 20, isAll: 1}, function (res) {
                    if (res.status === 200) {
                        that.data = res.data.list;
                    } else {
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            saveAddRole () {
                this.form.functionList = this.$refs.roleTransfer.roleList;
                let ids = [];
                this.form.functionList.forEach(function (item) {
                    ids.push(item.id);
                })
                this.roleData = ids;
                this.addRolePermissionDialog = false;
            },
            deleteRolePower(id){
                let newRoles = [];
                newRoles = this.form.functionList.filter(function(item){
                    return item.id !== id;
                });
                this.form.functionList = newRoles;
                let ids = [];
                ids = this.roleData.filter(function (item) {
                    return item !== id;
                });
                this.roleData = ids;
            }
        }

    })
</script>

<!-- 20170105 --></body>
</html>